1
00:00:00,680 --> 00:00:01,040
حسناً.

2
00:00:01,040 --> 00:00:08,690
في هذا الدرس، سوف نتعلم كل شيء عن العناصر الفارغة (void elements) مثل عنصر الخط الأفقي (horizontal rule) وعنصر

3
00:00:08,690 --> 00:00:09,770
فاصل الأسطر (break element).

4
00:00:10,130 --> 00:00:12,420
ما هي العناصر الفارغة بالضبط؟

5
00:00:12,440 --> 00:00:19,700
حسنًا، لقد رأينا ما هي العناصر غير الفارغة، مثل عنصر الفقرة (paragraph) أو عناصر العناوين (heading)،

6
00:00:19,700 --> 00:00:25,070
وهي ليست فارغة لأنها تحتوي على محتوى هنا في المنتصف بين وسمي البداية والنهاية.

7
00:00:25,490 --> 00:00:33,340
أما العنصر الفارغ فهو عنصر يُمنع تماماً وضع أي محتوى بداخل الوسم الخاص به.

8
00:00:33,350 --> 00:00:37,160
وفي الواقع، فإن شكل الوسم نفسه يبدو مختلفاً تماماً.

9
00:00:37,160 --> 00:00:43,490
هذا هو عنصر الخط الأفقي، ويمكنك أن ترى أنه يبدأ بزاوية قوس (أقواس زاوية) وينتهي

10
00:00:43,490 --> 00:00:44,660
بزاوية قوس كذلك.

11
00:00:44,660 --> 00:00:51,320
ولكن هنا تماماً، توجد هذه الشرطة المائلة للأمام (forward slash) قبل نهاية الوسم مباشرةً.

12
00:00:58,520 --> 00:01:07,500
قد تظن أن هذا يشبه إلى حد ما وسم الإغلاق لعنصر HTML عادي، ولكنه في الواقع يختلف بشكل طفيف، لأنه في وسم الإغلاق، تكون تلك الشرطة المائلة للأمام بعد زاوية القوس الافتتاحية مباشرةً.

13
00:01:07,500 --> 00:01:10,680
إنها هنا تماماً أمام الحرف.

14
00:01:10,710 --> 00:01:17,760
بينما في العناصر الفارغة، تكون الشرطة المائلة للأمام قبل نهاية الوسم مباشرةً.

15
00:01:17,850 --> 00:01:23,910
وعادةً حسب العرف المتبع، سترى مسافة صغيرة هنا أيضاً بين اسم الوسم وتلك

16
00:01:23,910 --> 00:01:25,170
الشرطة المائلة للأمام.

17
00:01:25,710 --> 00:01:28,740
هذا أمر يجب الحذر الشديد بشأنه.

18
00:01:28,740 --> 00:01:31,560
عندما تقوم بإنشاء هذه العناصر الفارغة.

19
00:01:31,560 --> 00:01:38,400
تأكد من أن الشرطة المائلة مائلة في الاتجاه الصحيح، أي بهذا الاتجاه وليس شرطة مائلة للخلف (backslash)

20
00:01:38,400 --> 00:01:39,150
مثل هذه.

21
00:01:39,150 --> 00:01:47,700
فعندما تشير إلى اليمين، فإنها تكون شرطة مائلة للأمام، وعندما تشير إلى الخلف، فإنها تكون

22
00:01:47,700 --> 00:01:49,020
شرطة مائلة للخلف.

23
00:01:49,770 --> 00:01:55,020
إذن كيف يبدو هذا عندما نضيفه إلى مستند HTML؟

24
00:01:55,050 --> 00:02:02,250
حسنًا، لدينا هنا فقرتانا السابقتان، وفي المنتصف بين الفقرتين تماماً قمت بإضافة

25
00:02:02,250 --> 00:02:10,860
عنصر الخط الأفقي والذي نأمل أن يساعدنا في تقسيم المحتوى لإظهار أن هذا الجزء غير متعلق

26
00:02:10,860 --> 00:02:11,670
بهذا الجزء.

27
00:02:11,670 --> 00:02:18,840
ولدينا نوع من الفصل بينهما؛ عندما نقوم بتشغيل هذا الكود أو عندما نعرضه في متصفح الويب،

28
00:02:18,840 --> 00:02:20,130
هذا هو ما ستراه.

29
00:02:20,160 --> 00:02:25,560
سترى الفقرة الأولى، ثم الفقرة الثانية، ثم سترى هذا الخط الأفقي،

30
00:02:25,560 --> 00:02:31,920
أو خطاً أفقياً بشكل أساسي في المكان الذي يتواجد فيه العنصر في ذلك المستند.

31
00:02:32,130 --> 00:02:35,970
الآن، الخط الأفقي ليس هو العنصر الفارغ الوحيد.

32
00:02:36,000 --> 00:02:38,910
هناك عنصر آخر شائع ستراه وهو عنصر فاصل الأسطر (break element).

33
00:02:38,910 --> 00:02:40,650
وهو يبدو هكذا.

34
00:02:40,680 --> 00:02:47,670
الآن، وبشكل مشابه مجدداً، لدينا اسم الوسم ومن ثم لدينا تلك الشرطة المائلة للأمام ومن ثم

35
00:02:47,670 --> 00:02:50,190
ننهي الوسم بشكل أساسي.

36
00:02:50,190 --> 00:02:51,810
إذن لا يوجد وسم افتتاح.

37
00:02:51,810 --> 00:02:53,040
ولا يوجد وسم إغلاق.

38
00:02:53,040 --> 00:02:56,580
بل هناك وسم واحد فقط يبدو هكذا.

39
00:02:56,580 --> 00:03:01,650
ويأتي اسم الوسم مباشرةً قبل الشرطة المائلة للأمام.

40
00:03:01,770 --> 00:03:04,800
الآن، كيف يعمل عنصر فاصل الأسطر؟

41
00:03:05,280 --> 00:03:11,220
حسناً، إنه مفيد جداً عندما يكون لديك نصوص تحتاج فيها إلى فصل الأشياء على أسطر منفصلة

42
00:03:11,220 --> 00:03:13,440
من أجل إعطاء المعنى الصحيح.

43
00:03:13,470 --> 00:03:21,240
على سبيل المثال، إذا كان لديك قصائد شعرية، فمن المفترض في الواقع أن تكون في نفس الفقرة، ولكن يجب

44
00:03:21,240 --> 00:03:27,900
أن يكون كل سطر منها على سطر منفصل لجعل القافية تعمل بشكل صحيح أو لجعل بنية

45
00:03:27,900 --> 00:03:29,370
القصيدة صحيحة.

46
00:03:29,400 --> 00:03:34,350
هذه قصيدة لأحد شعرائي المفضلين، وهو ويليام بليك.

47
00:03:34,350 --> 00:03:42,840
ولكي تظهر بشكل صحيح، لا يمكننا جعلها تظهر كلها في سطر واحد، حتى وإن كانت في نفس الفقرة.

48
00:03:42,930 --> 00:03:49,980
إذا كان لدينا هذا الكود هنا، على الرغم من أنها نعم، كلها في نفس الفقرة، وكلها مرتبطة

49
00:03:49,980 --> 00:03:52,920
ببعضها البعض وهذا أمر منطقي.

50
00:03:52,920 --> 00:03:54,960
ولكنك لا تنظر إلى الشعر بهذه الطريقة، فهذا لا يعمل حقاً.

51
00:03:54,960 --> 00:03:56,250
نحن لا نعرف أين يفترض بنا أن نتنفس وكيف يفترض بنا قراءة القصيدة.

52
00:03:56,250 --> 00:04:00,270
لذا بدلاً من ذلك، يمكننا إضافة عناصر فاصل الأسطر التي تعلمنا عنها للتو.

53
00:04:00,270 --> 00:04:04,350
عنصرنا الفارغ لا يحتوي على أي محتوى بداخله، ولكنه يوضح فقط أين يجب أن تكون الفواصل في هذه الفقرة

54
00:04:04,590 --> 00:04:11,820
لكي تبدو هذه القصيدة بشكل صحيح ومتناسق.

55
00:04:11,820 --> 00:04:14,880
وعندما يتم عرض مستند HTML هذا، هذا هو ما ستراه.

56
00:04:14,880 --> 00:04:19,110
تنسيق مثالي لقصيدة شعرية.

57
00:04:19,140 --> 00:04:21,410
"أن ترى العالم في حبة رمل، والجنة في زهرة برية.

58
00:04:21,420 --> 00:04:25,230
وأن تمسك اللانهائية في راحة يدك، والأبدية في ساعة."

59
00:04:25,260 --> 00:04:29,970
وكل هذا منسق بشكل جميل بفضل كل عنصر من عناصر فاصل الأسطر في نهاية كل سطر.

60
00:04:29,970 --> 00:04:39,060
الآن جاء دورك لتجربة تمرين باستخدام هذه العناصر الفارغة.

61
00:04:39,540 --> 00:04:45,120
لذا تفضل وقم بتحميل ملفات البداية لهذا التمرين من مصادر الدورة التدريبية لهذا الدرس.

62
00:04:45,120 --> 00:04:53,160
وعندما تقوم بفك الضغط عنها وفتحها، هذا هو ما يجب أن تراه في ملف index.

63
00:04:53,700 --> 00:04:59,610
لدينا اسم شاعرنا ويليام بليك، وهذا على ما يبدو عنوانه الحقيقي الذي عاش

64
00:04:59,610 --> 00:05:07,170
فيه في مرحلة ما من حياته.

65
00:05:07,170 --> 00:05:08,900
ومن ثم لدينا فقرتان من ويكيبيديا تصفان الشاعر باختصار.

66
00:05:08,910 --> 00:05:14,160
وأريدك أن تستخدم كل ما تعلمته حتى الآن لتنسيق هذا المستند بحيث

67
00:05:14,160 --> 00:05:20,790
يبدو مثل النتيجة النهائية (الهدف) التي وضعتها هنا من أجلك.

68
00:05:20,790 --> 00:05:24,480
كما ترى، في هذا المستوى العلوي، سيتم عرض اسم شاعرنا كعنوان من الدرجة الأولى H1، لأن

69
00:05:24,600 --> 00:05:31,200
هذا هو الشيء الأكثر أهمية في هذه الصفحة المحددة.

70
00:05:31,200 --> 00:05:35,450
وبعد ذلك لدينا عنوان الشاعر، والذي يتم عرضه كفقرة.

71
00:05:35,460 --> 00:05:40,800
ولكن لاحظ أن العناوين البريدية، على الرغم من أنها فقرة واحدة، إلا أنها تحتاج مجدداً إلى التقسيم

72
00:05:40,800 --> 00:05:47,520
إلى أسطر منفصلة باستخدام عنصر فاصل الأسطر الخاص بنا.

73
00:05:47,520 --> 00:05:50,670
وفي النهاية، لدينا خط أفقي يفصل العنوان واسم المؤلف

74
00:05:50,670 --> 00:05:58,380
عن الوصف القصير لهذا المؤلف، والذي يجب أن يوضع في فقرتين منفصلتين.

75
00:05:58,380 --> 00:06:04,960
الآن أريدك أن توقف الفيديو مؤقتاً وتقوم بتعديل ملف index.html لتصل إلى هذه النتيجة goal.png.

76
00:06:04,990 --> 00:06:12,720
عندما تقوم بمعاينة هذا الموقع بدلاً من هذه الكتلة المتداخلة والمبعثرة من النصوص التي لدينا في الوقت الحالي.

77
00:06:13,000 --> 00:06:19,930
أوقف الفيديو الآن وقم بتجربة هذا التحدي.

78
00:06:20,650 --> 00:06:24,430
حسناً.

79
00:06:26,080 --> 00:06:26,620
أتمنى أن تكون قد جربت ذلك وسار كل شيء على ما يرام.

80
00:06:26,620 --> 00:06:31,060
سوف أستعرض معكم الحل الآن.

81
00:06:31,720 --> 00:06:33,850
أولاً، قلنا إننا سنضع وسم H1 لاسم الشاعر، ومن ثم سنضع وسم فقرة

82
00:06:33,850 --> 00:06:41,200
يحيط بالعنوان البريدي.

83
00:06:41,200 --> 00:06:44,390
الآن، لكي نجعل هذا العنوان يظهر على أسطر مختلفة، سنضيف عنصر فاصل الأسطر الخاص بنا إلى

84
00:06:44,410 --> 00:06:52,240
نهاية كل سطر.

85
00:06:52,240 --> 00:06:53,860
وتذكر أن عنصر فاصل الأسطر هو وسم مغلق ذاتياً (self-closing tag).

86
00:06:53,860 --> 00:06:57,730
لذا سنقوم بإنشائه على هذا النحو تماماً.

87
00:06:57,730 --> 00:07:02,110
الآن سأقوم ببساطة بنسخه ولصقه في نهاية كل سطر، ويمكنك رؤية كم أصبح

88
00:07:02,350 --> 00:07:09,340
عنواننا منسقاً بشكل جميل الآن.

89
00:07:09,340 --> 00:07:11,710
وأخيراً، أردنا فصل هاتين الفقرتين في النهاية.

90
00:07:11,710 --> 00:07:19,240
لذا سأقوم ببساطة بفعل ذلك.

91
00:07:19,240 --> 00:07:22,750
والآن أصبحت النتيجة ممتازة ومثالية جداً.

92
00:07:22,870 --> 00:07:26,890
لقد حققنا النتيجة المطلوبة.

93
00:07:28,840 --> 00:07:31,960
حصلنا على عنوان H1، وعنواننا البريدي منفصل، والشيء الوحيد المتبقي لفعله هو إضافة ذلك الخط

94
00:07:31,990 --> 00:07:38,380
الأفقي بين العنوان والفقرتين.

95
00:07:38,380 --> 00:07:42,340
دعنا ننتقل ونضيف العنصر الفارغ الآخر الذي تعلمنا عنه.

96
00:07:42,370 --> 00:07:46,690
والآن نكون قد أكملنا التحدي ويمكنك التحقق من عملك بمقارنته بالحل للتأكد من أن

97
00:07:46,690 --> 00:07:52,960
كل شيء قمت به يبدو متطابقاً تماماً.

98
00:07:52,960 --> 00:07:56,530
الآن، هناك حيلة ذكية أحب استخدامها وهي ببساطة نسخ الحل والذهاب إلى موقع diffchecker.com ولصق

99
00:07:56,680 --> 00:08:03,940
كود الحل هناك.

100
00:08:03,940 --> 00:08:05,470
ثم لصق الكود الخاص بك، وبعد ذلك تضغط على "البحث عن الاختلافات" (find difference).

101
00:08:06,620 --> 00:08:12,710
وسيقوم الموقع بتظليل جميع الأماكن المختلفة في حال أخطأت في كتابة كلمة ما أو إذا قمت

102
00:08:12,770 --> 00:08:18,320
بشيء خاطئ.

103
00:08:18,320 --> 00:08:19,370
على سبيل المثال، في هذه الحالة، في نسختنا، توجد مسافة بعد كلمة Blake ووسم

104
00:08:19,370 --> 00:08:26,360
الإغلاق، والتي لن تحدث أي فرق من حيث لغة HTML.

105
00:08:26,390 --> 00:08:30,830
ولكن لو أنني بدلاً من ذلك كتبت وسم H1 بشكل غير صحيح ولم أكتب حرف H في وسم الإغلاق، حينها

106
00:08:30,980 --> 00:08:41,030
يمكنك أن ترى أن النتيجة ستبدو مختلفة تماماً، وعندما ننظر في هذا النص بالكامل لن نعرف لماذا حدث هذا، لذا نقوم بنسخه ومقارنته بالحل.

107
00:08:41,030 --> 00:08:45,560
وسوف يبرز حقيقة أن هذا الجزء غير صحيح، ويجب الآن تنبيهنا للتحقق من الفرق.

108
00:08:45,560 --> 00:08:51,590
هذه نصيحة واحدة لدي لكم اليوم.

109
00:08:51,590 --> 00:09:00,770
ودعوني أعود فقط إلى ملف index.html الخاص بنا لإصلاح هذا الخطأ البرمجي وسنكون الآن جاهزين للانطلاق.

110
00:09:01,070 --> 00:09:04,490
الآن، فيما يتعلق بالأمور التي يجب فعلها والتي لا يجب فعلها مع العناصر الفارغة، في بعض الأحيان ترى الناس يقومون به هو إضافة وسم فاصل أسطر

111
00:09:04,940 --> 00:09:13,800
لإضافة سطر جديد بدلاً من إنشاء عنصر فقرة منفصل.

112
00:09:14,690 --> 00:09:22,340
الآن، هذا ليس ما تريد القيام به لأن هذا ليس جيداً جداً لإمكانية الوصول (accessibility)، مما يعني

113
00:09:22,370 --> 00:09:28,010
أنه سيجعل من الصعب على المستخدمين المكفوفين الذين يستخدمون قارئات الشاشة فهم المحتوى على موقعك.

114
00:09:28,040 --> 00:09:34,040
لذا أنصحك دائماً بإنشاء عناصر فقرة جديدة عندما يكون لديك فقرات جديدة، واستخدام عنصر فاصل

115
00:09:34,040 --> 00:09:40,630
الأسطر فقط عندما يكون هناك سبب ما يجعلك ترغب في فصل الأسطر المختلفة في

116
00:09:40,640 --> 00:09:47,570
فقرة واحدة.

117
00:09:47,570 --> 00:09:54,110
ولكنها تظل فقرة واحدة كما هو الحال في قصيدة شعرية أو في حالة عنوان بريدي كما

118
00:09:54,110 --> 00:09:55,220
غطينا في هذا الدرس.

119
00:09:55,220 --> 00:10:01,580
الآن، الشيء الأخير الذي تجب الإشارة إليه هو أنه في بعض الأحيان عندما تنظر إلى عنصر الخط الأفقي أو

120
00:10:01,610 --> 00:10:03,140
عنصر فاصل الأسطر، قد تراه ممثلاً

121
00:10:03,830 --> 00:10:11,120
بدون وسم الإغلاق النهائي هذا، قد ترى الناس يكتبونه ببساطة هكذا وهذا يعتبر HTML

122
00:10:11,120 --> 00:10:14,340
صحيحاً تماماً ومقبولاً.

123
00:10:14,340 --> 00:10:21,240
لذا يمكن أن يكون لديك بالفعل عنصر خط أفقي يبدو هكذا.

124
00:10:21,450 --> 00:10:21,950
ويمكن أن يكون لديك عنصر فاصل أسطر يبدو هكذا بدلاً من العنصر الذي يحتوي على الشرطة المائلة للأمام في

125
00:10:21,960 --> 00:10:26,940
النهاية.

126
00:10:26,970 --> 00:10:34,620
وكلاهما خياران صحيحان ومتاحان.

127
00:10:34,620 --> 00:10:35,190
يمكنك اختيار هذا أو يمكنك اختيار ذاك بدءاً من إصدار HTML5، وهو أحدث إصدار من HTML.

128
00:10:35,190 --> 00:10:38,370
ما بدأ يفعله المتصفح هو أنه بدأ يتجاهل هذه الشرطة المائلة للأمام في النهاية لدرجة أنه لا

129
00:10:38,370 --> 00:10:44,670
ينظر إليها حتى.

130
00:10:44,700 --> 00:10:50,490
هو يرى الجزء الأول ويعرف بالفعل أن فاصل الأسطر هو عنصر فارغ وأن الخط الأفقي هو عنصر

131
00:10:50,490 --> 00:10:51,120
فارغ.

132
00:10:51,120 --> 00:10:57,330
لذا فهو لا يحتاج فعلياً إلى الاستمرار في القراءة.

133
00:10:57,330 --> 00:10:57,900
ولكني أنصح بكتابة الكود الخاص بك مع وجود هذه الشرطة المائلة للأمام في النهاية.

134
00:10:57,900 --> 00:11:00,300
والسبب في ذلك هو أنه عندما تقرأ الكود الخاص بك، بصفتك بشراً، سيكون من الأسهل عليك بكثير

135
00:11:00,420 --> 00:11:06,150
رؤية أن هذا عنصر فارغ ولا يحتاج إلى وسم إغلاق، وبذلك لا ينتهي بك الأمر

136
00:11:06,150 --> 00:11:11,820
مرتبكاً، ويمكنك تمييز العناصر الفارغة والعناصر غير الفارغة بسهولة والتفريق بينها

137
00:11:11,820 --> 00:11:19,590
وبين بعضها البعض.

138
00:11:19,590 --> 00:11:26,370
إذن هذه مجرد نصيحة سريعة وشيء لتنبيهك عندما تراه مكتوباً بهذا الشكل على الإنترنت.

139
00:11:26,370 --> 00:11:27,240
كلا الإصدارين صحيحان تماماً.

140
00:11:27,240 --> 00:11:34,260
ويمكنك الانتقاء والاختيار بينهما، ولكنني أوصي بالاعتماد على هذا الإصدار.